<html>
<head>
    <title>SPE: ActiveMultiplier</title>
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="./css/style.css">
</head>
<body>
    <p class="numParticles"></p>

    <div class="alive-wrapper">
        <p>Change value below to change number of particles</p>
        <p class="small">0 = No particles; 1 = 100% of emitter's particle count</p>
        <input type="number" min="0" max="1" step="0.05" value="1" class="alive-value">
    </div>

    <script type="text/javascript" src="./js/THREE-r84.js"></script>
    <script type="text/javascript" src="./js/Stats.min.js"></script>
    <script type="text/javascript" src="../build/SPE.min.js"></script>

    <script type="text/javascript">
        // variables used in init()
        var scene, camera, renderer, stats, stats2, clock;

        // Used in initParticles()
        var emitter, particleGroup;

        // Setup the scene
        function init() {
            scene = new THREE.Scene();
            camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 10000);
            camera.position.z = 50;
            camera.lookAt( scene.position );

            renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            renderer.setClearColor(0x000000);

            stats = new Stats();
            clock = new THREE.Clock();

            stats.domElement.style.position = 'absolute';
            stats.domElement.style.top = '0';

            document.body.appendChild( renderer.domElement );
            document.body.appendChild( stats.domElement );
        }

        // Create particle group and emitter
        function initParticles() {
            particleGroup = new SPE.Group({
                texture: {
                    value: THREE.ImageUtils.loadTexture('./img/smokeparticle.png')
                }
            });

            emitter = new SPE.Emitter({
                maxAge: {
                    value: 2
                },
                position: {
                    value: new THREE.Vector3(0, 0, 0),
                    spread: new THREE.Vector3( 0, 0, 0 )
                },

                acceleration: {
                    value: new THREE.Vector3(0, -10, 0),
                    spread: new THREE.Vector3( 10, 0, 10 )
                },

                velocity: {
                    value: new THREE.Vector3(0, 15, 0),
                    spread: new THREE.Vector3(10, 7.5, 10)
                },

                color: {
                    value: [ new THREE.Color('white'), new THREE.Color('red') ]
                },

                size: {
                    value: 1
                },

                particleCount: 2000,
                activeMultiplier: 1
            });

            particleGroup.addEmitter( emitter );
            scene.add( particleGroup.mesh );

            document.querySelector('.numParticles').textContent =
                'Total particles: ' + emitter.particleCount;

            document.querySelector( '.alive-value' ).addEventListener( 'change', function( e ) {
                emitter.activeMultiplier = +this.value;
            }, false );
        }



        function animate() {
            requestAnimationFrame( animate );

            // Use a fixed time-step here to avoid gaps
            render( clock.getDelta() );

            stats.update();
        }


        function render( dt ) {
            particleGroup.tick( dt );
            renderer.render( scene, camera );
        }


        window.addEventListener( 'resize', function() {
            var w = window.innerWidth,
                h = window.innerHeight;

            camera.aspect = w / h;
            camera.updateProjectionMatrix();

            renderer.setSize( w, h );
        }, false );

        init();
        initParticles();

        setTimeout(animate, 0);

    </script>

</body>
</html>
